<template>
  <div class="patient-container">
    <el-card v-show="!isEditOrAdd">
      <template #header>
        <div class="card-header">
          <span>就诊人管理</span>
          <el-button type="primary" :icon="Plus" @click="handleAdd">添加就诊人</el-button>
        </div>
      </template>
      <div class="item-container">
        <div v-for="item in patientList" class="item" :key="item.id">
          <Visitor
            :patient="item"
            @getList="initData"
            @editPatient="handleEditPatient(item)"></Visitor>
        </div>
      </div>
    </el-card>
    <AddOrUpdatePatient
      :patient="patient"
      @handleGoback="handleGoback"
      ref="addOrUpdatePatientRef"
      @handleSaveSuccess="handleSaveSuccess"
      v-show="isEditOrAdd" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { reqPatientList, reqPatientInfoById } from '@/api/patient'
import { PatientArr, Patient } from '@/api/patient/type'
import AddOrUpdatePatient from './addOrUpdate.vue'

const patientList = ref([] as PatientArr)
const $router = useRouter()
const $route = useRoute()

onMounted(() => {
  handlePathChage()
})
// 获取所有就诊人信息
const initData = async () => {
  const { data } = await reqPatientList()
  patientList.value = data
}
// 添加就诊人
const handleAdd = () => {
  // 跳转到添加就诊人页面
  $router.push('/user/patient?type=add&id=')
}

// 监听路由变化
watch(
  () => $router.currentRoute.value.fullPath,
  () => {
    handlePathChage()
  }
)
// 控制编辑和添加就诊人显示隐藏
let isEditOrAdd = ref(false)
let addOrUpdatePatientRef = ref()
let patient = ref({} as Patient)
const handlePathChage = async () => {
  // 判断有没有type
  let query = $route.query
  let type = query.type
  let id = query.id
  // 没有type，则获取所有就诊人的信息
  if (!type) {
    initData()
    return
  }
  // 添加就诊人
  if (type == 'add') {
    isEditOrAdd.value = true
    addOrUpdatePatientRef.value.initData({})
  } else if (type == 'update') {
    // 获取就诊人信息
    if (id) {
      const { data } = await reqPatientInfoById(id as string)
      addOrUpdatePatientRef.value.initData(data)
      isEditOrAdd.value = true
    }
  }
}

const handleSaveSuccess = () => {
  $router.push('/user/patient')
  isEditOrAdd.value = false
}
// 处理编辑
const handleEditPatient = (patient: Patient) => {
  // 跳转到逻辑就诊人页面
  $router.push('/user/patient?type=update&id=' + patient.id)
}
// 处理返回
const handleGoback = () => {
  $router.push('/user/patient')
  isEditOrAdd.value = false
}
</script>

<style lang="scss" scoped>
.el-card {
  width: 100%;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.item-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;

  .item {
    margin-right: 15px;
    margin-bottom: 15px;
    width: 31%;
  }
}
</style>
